<template>
  <div class="agent-view" >
    <div class="agent-view-button">
      <el-select v-model="statusValue" style="width: 170px;margin-right: 15px;" placeholder="请选择审核类型">
        <el-option label="全部" :value="-1"></el-option>
        <el-option label="未审核" :value="0"></el-option>
        <el-option label="审核通过" :value="1"></el-option>
        <el-option label="审核拒绝" :value="2"></el-option>
      </el-select>
      <el-input style="width: 250px;" placeholder="请输入要搜索的账号(用户名)" v-model="agentName" class="input-with-select" clearable> </el-input>
      <el-button type="primary" @click="searchAgent">搜索</el-button>
    </div>
    <div class="agent-view-info" v-loading="loading">
      <div v-if="state.listData.length > 0">
        <el-table :max-height="state.posheight" :data="state.listData" border>
          <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
          <el-table-column label="账号(用户名)" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.username || '-'}}</template>
          </el-table-column>
          <el-table-column label="密码" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.password_raw || '-' }}</template>
          </el-table-column>
          <el-table-column label="审核状态" show-overflow-tooltip align="center">
            <template #default="scope">
              <span class="view-info-status" v-if="scope.row.status === 0">未审核<img src="@/assets/img/unaudited.png" alt=""></span>
              <span class="view-info-status" v-if="scope.row.status === 1">审核通过<img src="@/assets/img/pass.png" alt=""></span>
              <span class="view-info-status" v-if="scope.row.status === 2">审核拒绝<img src="@/assets/img/reject.png" alt=""></span>
              <span class="view-info-status" v-if="scope.row.status === null">-</span>
            </template>
          </el-table-column>
          <el-table-column label="申请原因" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.apply_reason || '-'}}</template>
          </el-table-column>
          <el-table-column label="拒绝原因" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.reject_reason || '-'}}</template>
          </el-table-column>
          <el-table-column label="申请时间" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.created_at || '-'}}</template>
          </el-table-column>
          <el-table-column label="审批时间" show-overflow-tooltip align="center">
            <template #default="scope">{{ scope.row.reviewed_at || '-'}}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="220" show-overflow-tooltip align="center">
            <template #default="scope">
              <el-button v-if="scope.row.status === 1" @click.prevent="editAgent('update',scope.row)" type="primary" size="small">修改</el-button>
              <el-button v-if="scope.row.status === 0" @click.prevent="editAgent('add',scope.row)" type="success" size="small">同意</el-button>
              <el-button v-if="scope.row.status === 0" @click.prevent="refuse(scope.row)" type="warning" size="small">拒绝</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="right-view-page">
          <el-pagination 
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :page-size="20"
            :pageSizes='[10, 20, 30, 40]'
            :current-page="currentPage">
          </el-pagination>
        </div>
      </div>
      <div v-else class="right-view-nodata">
        <img src="@/assets/img/no-data.png" alt="">
        <div>暂无数据</div>
      </div>
    </div>
    <!-- 新增修改用户代理 -->
    <el-dialog
      width="45%"
      :title="titleName + '用户代理数据'"
      :close-on-click-modal="false"
      v-model="agentVisible">
      <addUserAgent v-if="agentVisible" :parmas="{type:titleValue,rowInfo:state.rowInfo,agentStatus:'user'}" @closeAgent="closeAgent"></addUserAgent>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref,reactive,onMounted,watch } from 'vue';
  import { ElMessage  } from 'element-plus';
  import { ElMessageBox } from 'element-plus';
  import API from "@/utils/api";
  import addUserAgent from './addUserAgent.vue'
  const agentVisible = ref(false)
  const titleName = ref('新增')
  const titleValue = ref('add')
  const agentName = ref('')
  const total = ref(0)
  const currentPage = ref(1)
  const loading = ref(false)
  const statusValue = ref(-1)
  const state = reactive({
    listData:[],
    rowInfo:{},
    h: document.body.clientHeight,
    posheight: 100,
    timer: false,
  })
  watch(() => state.h, (newValue, oldValue) => {
    if(!state.timer) {
      state.posheight = newValue - 150
      state.timer = true
      setTimeout(function (){
        state.timer = false
      },400)
    }
  })
  const editAgent = ((type,item) => {
    agentVisible.value = !agentVisible.value
    titleValue.value = type
    state.rowInfo = item
    if(type === 'add') {
      titleName.value = '新增'
    }else {
      titleName.value = '修改'
    }
  })
  const closeAgent = ((type) => {
    agentVisible.value = false
    if(type == 1) {
      getUserAgentList()
    }
  })
  const searchAgent = (() => {
    currentPage.value = 1
    getUserAgentList()
  })
  const getUserAgentList = (() => {
    loading.value = true
    API.agentList.getUserAgentList({
      username:agentName.value,
      status:statusValue.value,
      page:currentPage.value,
      limit:20,
    }, (res) => {
      loading.value = false
      if(res.code === 0) {
        state.listData = res.data.details
        total.value = res.data.total
      }
    })
  })
  const handleCurrentChange = ((val)=>{
    currentPage.value = val
    getUserAgentList()
  })
  function posTableHeight () {
    let h = document.body.clientHeight,
    new_h = h - 150;
    state.posheight = new_h;
  }
  const refuse = ((row) => {
    ElMessageBox.prompt('请填写拒绝原因:','审核拒绝',{
      inputType:'textarea',
      distinguishCancelAndClose: true,
      confirmButtonText: '确定',
      cancelButtonText: '取消',})
    .then(({ value }) => {
      API.agentList.rejectUserAgent({id:row.id,reject_reason:value}, (res) => {
        if(res.code === 0) {
          ElMessage.success('已拒绝')
          getUserAgentList()
        }
      })
    })
    .catch(() => {})
  })
  onMounted(() => {
    getUserAgentList()
    posTableHeight()
    window.onresize = () => {
      return (() => {
        let a = document.body.clientHeight
        state.h = a
      })()
    }
  })
</script>

<style lang="scss" scoped>
.agent-view {
  padding: 20px;
  .agent-view-button {
    display: flex;
    text-align: start;
    .input-with-select {
      margin-right: 15px;
    }
    .input-with-button {
      color: #fff;
      background: #409eff;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .el-input-group {
      width: 370px;
    }
  }
  .right-view-nodata {
    margin-top: 160px;
  }
  .agent-view-info {
    margin: 20px 0;
    .view-info-status {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      img {
        margin-left: 5px;
      }
    }
  }
  .right-view-page {
    display: flex;
    justify-content: end;
    margin-top: 15px;
  }
}
::v-deep .el-select__placeholder {
  color: #409eff;
}
</style>